<template>
  <div>
    <basic-dialog
      :visible.sync="supplierVisible"
      :handleClose="handleCloseDialog"
      :title="title"
      :show-footer="false"
      :width="'60%'"
    >
      <div class="form-container">
        <el-form ref="queryData" :inline="true" :model="queryData" @submit.native.prevent>
          <el-form-item label="供应商代码:" prop="supplierCode">
            <el-input
              v-model="queryData.supplierCode"
              placeholder="请输入供应商代码"
              @keyup.enter.native="handleQueryData(1)"
            ></el-input>
          </el-form-item>
          <el-form-item label="供应商名称:" prop="supplierName">
            <el-input
              v-model="queryData.supplierName"
              placeholder="请输入供应商名称"
              @keyup.enter.native="handleQueryData(1)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQueryData(1)"
              >查询</el-button
            >
            <el-button @click="handleResetData('queryData')">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <BasicTable
        ref="basicTable"
        showActionCol
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="443"
        :showSelectCol="false"
        :actionRender="actionRender"
        @rowDblclick="handleSelectSupplier"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      />
    </basic-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/supplier/BasicTable';
import { getBtnsId } from '@/libs/btnsPermission';
import { querySupplierInfoService } from '@api/supplier/returnVisteManage';
import { queryInvoiceSupplier } from '@api/supplier/management/common'; // 查询开票供应商信息
import { isResponseSuccess } from '@/pages/supplier/utils/bizUtils';
import { SUPPLIER_TYPE_SELECT_LIST, SUPPLIER_NATURE_SELECT_LIST } from '@/pages/supplier/constants/common';
import { list2Obj } from '@/pages/supplier/utils';

export default {
  name: 'SelectSupplierDialog',
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    supplierVisible: { type: Boolean, default: false },
    // 仅查询开票供应商
    invoice: { type: Boolean, default: false },
    title: { type: String, default: '选择供应商' }
  },
  data () {
    return {
      queryData: {
        supplierName: '', // 供应商名称
        supplierCode: '' // 供应商代码
      },
      pageSizes: [10, 20, 30, 40],
      pagination: {
        current: 1,
        total: 0,
        size: 10
      },
      tableInfo: {
        list: [],
        loading: false,
        columns: [],
      }
    };
  },
  watch: {
    supplierVisible: {
      immediate: true,
      handler (newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.updateColumns(newVal)
          this.reset()
        }
      }
    }
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  methods: {
    // 操作列
    actionRender (h, { row }) {
      return (
        <div class="table-action">
          <el-button
            size="mini"
            type="text"
            onClick={() => this.handleSelectSupplier(row)}
          > 选择
          </el-button>
        </div>
      );
    },
    // 选择供应商
    handleSelectSupplier (row) {
      this.$emit('handle-select', row);
      this.handleCloseDialog();
    },
    // 获取 表格数据
    handleQueryData (pageNum) {
      if (pageNum) {
        this.pagination.current = pageNum;
      }
      this.tableInfo.loading = true;
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      if (this.invoice) {
        // 查询开票供应商信息
        console.log('查询开票供应商信息 :>> ', JSON.stringify(this.queryData))
        queryInvoiceSupplier({
          invoiceSupplierCode: this.queryData.supplierCode,
          invoiceSupplierName: this.queryData.supplierName,
          ...this.pagination }).then(res => {
          this.tableInfo.loading = false;
          if (isResponseSuccess(res)) {
            const { records, total } = res.result;
            this.tableInfo.list = records;
            this.pagination.total = total;
            this.reloadTableLayout()
          }
        }).catch(() => {
          this.tableInfo.loading = false;
        });
      } else {
        // 查询所有供应商
        querySupplierInfoService({ ...this.queryData, ...this.pagination }).then(res => {
          this.tableInfo.loading = false;
          if (isResponseSuccess(res)) {
            const { records, total } = res.result;
            this.tableInfo.list = records;
            this.pagination.total = total;
            this.reloadTableLayout()
          }
        }).catch(() => {
          this.tableInfo.loading = false;
        });
      }
    },
    // 分页状态变更
    handlePageChange (pageNum) {
      this.pagination.current = pageNum;
      this.handleQueryData();
    },
    // 分页状态变更
    handlePageSizeChange (pageSize) {
      this.pagination.size = pageSize;
      this.handleQueryData(1);
    },
    // 重置查询条件
    handleResetData (formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:supplierVisible', false);
    },
    // 更新列表字段
    updateColumns () {
      let columns = [
        { title: '供应商代码', key: 'supplierCode', width: 90 },
        { title: '供应商名称', key: 'supplierName', width: 240 },
        {
          title: '供应商类型',
          key: 'supplierType',
          formatter: (row, columns, cellValue) => {
            return list2Obj(SUPPLIER_TYPE_SELECT_LIST)[cellValue]
          }
        },
        {
          title: '供应商性质',
          key: 'supplierNature',
          formatter: (row, columns, cellValue) => {
            return list2Obj(SUPPLIER_NATURE_SELECT_LIST)[cellValue]
          }
        }, { title: '主营品类代码', key: 'mainCategoryCode', },
        { title: '主营品类', key: 'mainCategory', },
        { title: '账号关联手机号', key: 'accountPhone' },
        { title: '供应商分类', key: 'supplierClassifyName' }
      ]
      if (this.invoice) {
        columns = [
          { title: '供应商代码', key: 'invoiceSupplierCode', width: 90 },
          { title: '供应商名称', key: 'invoiceSupplierName', width: 240 },
          // { title: '收款人', key: 'payee', },
          // { title: '开户行', key: 'bankBranchId', },
          // { title: '收款账号', key: 'bankAccount' },
        ]
      }
      this.tableInfo.columns = columns
      this.reloadTableLayout()
    },
    // 重置状态
    reset () {
      this.tableInfo.list = []
      this.tableInfo.loading = false
      this.pagination.current = 1
      this.pagination.size = 10
      this.pagination.total = 0
      this.queryData.supplierCode = ''
      this.queryData.supplierName = ''
    },
    // 表格DOM重新渲染
    reloadTableLayout () {
      this.$nextTick(() => {
        this.$refs.basicTable.$refs.elTable.doLayout();
      });
    },
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
